<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <!-- Import style -->
  <link rel="stylesheet" href="./static/element-plus/index.css" />
  <!-- Import Vue 3 -->
  <script src="./static/js/vue.global.js"></script>
  <!-- Import component library -->
  <script src="./static/element-plus/index.full.js"></script>
</head>

<body>
  <div id="app">
    <h2>登录</h2>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model="username" placeholder="请输入用户名" />
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="password" type="password" placeholder="请输入密码" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>

      <el-form-item>
        <a href="./index.html">返回</a>
      </el-form-item>
    </el-form>
    <div v-if="error" style="color: red; margin-top: 10px;">
      {{ error }}
    </div>
  </div>

  <script>
    const { createApp } = Vue;
    const app = createApp({
      data() {
        return {
          username: '',
          password: '',
          error: '',
          correctUsername: 'www',
          correctPassword: '123'
        };
      },
      methods: {
        onSubmit() {
          // 清除之前的错误信息
          this.error = '';

          if (!this.username) {
            this.error = '用户名不能为空';
            return;
          }

          if (!this.password) {
            this.error = '密码不能为空';
            return;
          }

          // 验证用户名和密码是否正确
          if (this.username !== this.correctUsername || this.password !== this.correctPassword) {
            this.error = '用户名或密码错误';
            return;
          }

          console.log(window.location.href ='./personal.html');

        }
      }
    });

    app.use(ElementPlus);
    app.mount('#app');
  </script>

</body>

</html>